<template>
    <a-select
        v-bind="custProps"
        v-model:value="slcValue"
        :class="{no_border: noborder}"
        :allowClear="!noClear">
        <slot></slot>
    </a-select>
</template>

<script lang="jsx" setup>
import { stringType } from 'ant-design-vue/es/_util/type';
import { ref, onMounted, onActivated, useAttrs, computed, watch } from 'vue'

defineOptions({
    inheritAttrs: false
})
const props = defineProps({
    value: void 0,
    noClear: {
        type: Boolean,
        default: false
    },
    noborder: {
        type: Boolean,
        default: false
    }
})
const emit = defineEmits(['update:value'])

const attrs = useAttrs()
const custProps = computed(() => {
    return attrs
})

// 值为UNfined时，默认改成空字符串
const slcValue = ref(void 0)
watch(() => props.value, (val) => {
    slcValue.value = val === '' ? void 0 : val
})
watch(slcValue, (val) => {
    emit('update:value', val === void 0 ? '' : val)
})


onMounted(() => {
    slcValue.value = props.value === '' ? void 0 : props.value
})

</script>

<style lang="less" scoped>
.no_border{
    :deep(.ant-select-selector){
        border: 0!important;
        box-shadow: none!important;
    }
}

</style>
